{% extends "base.html" %}


{% block head %}
   <style type="text/css">
   .info-content {
          position: relative;
          background-color: #BDE5F8;
          border: 1px solid #999999;
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 6px;
          outline: none;
          -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
                  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
          background-clip: padding-box;
      }
   .error-content {
          position: relative;
          background-color: #FFBABA;
          border: 1px solid #999999;
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 6px;
          outline: none;
          -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
                  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
          background-clip: padding-box;
      }

    </style>
    <script>
    $(document).ready(function(){

{% with OKs = get_flashed_messages(category_filter=["ok"]) %}
{% if OKs %}
    {% for msg in OKs %}
    show_info_refresh("OK","{{ msg }}")
    {% endfor %}
{% endif %}
{% endwith %}

{% with Errors = get_flashed_messages(category_filter=["error"]) %}
{% if Errors %}
    {% for msg in Errors %}
    show_error_refresh("Error","{{ msg }}")
    {% endfor %}
{% endif %}
{% endwith %}


    });



    function add(){
        if(!check_all()){
            return
        }
       $.post("/add_commandtype",
        {
            csrf_token:"{{ csrf_token() }}",
            typename:$("#typename").val(),
            description:$("#description").val()
        },
        function(data,status){
            content= data;
            $('#addModal').modal('hide')
            if (content == "success"){
               show_info_refresh("ok","Added successfully");
            }
            else if( content.match("is already exist in database")){
                show_error_refresh("error",content)
            }
            else if (content.match("Plese delete hosts in")){
                show_error_refresh("error",content)
            }
            else{
                show_error_refresh("unknown error","Please check the server's log")
            }
         });
        }

    function edit() {
        if(!check_all()){
            return
        }
        $.post("/edit_commandtype/"+$('#edit').attr('typeid'),
        {
            csrf_token:"{{ csrf_token() }}",
            typename:$("#typename").val(),
            description:$("#description").val(),
        },
        function(data,status){
            content= data;
            $('#addModal').modal('hide')
            if (content == "success"){
               show_info_refresh("ok","Edited successfully");
            }
            else if( content.match("is already exist in database")){
                show_error_refresh("error",content)
            }
            else{
                show_error_refresh("unknown error","Please check the server's log")
            }
         });
        }

    function check_all(){
        if ($("#typename").val() == "")
        {
            $('.input-group:eq(0)').addClass("has-error");
            return false
        }
        else
        {
            if($('.input-group:eq(0)').hasClass("has-error"))
            {
                $('.input-group:eq(0)').removeClass("has-error");
            }
        }
        return true;
    }

    function show_edit(id,typename,description){
        $('#add').attr('id','edit')
        $("#typename").attr("value",typename) ;
        $("#description").attr("value",description) ;
        $("#addModalLabel").text("Edit a  Command Type")
        $('#edit').attr('typeid',id);
        $('#edit').text('Save changes');
        $('#edit').attr("onclick","edit()")
        $('#addModal').modal('show');
    }

    function show_add(){
        $('#edit').attr('id','add')
        $("#typename").attr("value","") ;
        $("#description").attr("value","") ;
        $("#addModalLabel").text("Add a  Command Type")
        $('#add').text('Add')
        $('#add').attr("onclick","add()")
        $('#addModal').modal('show');
    }


    function show_info_refresh(title,info) {
            $("#myinfoLabel_refresh").text(title) ;
            $("#myinfoContent_refresh").text(info) ;
            $(".error-content").addClass("info-content")
            $(".info-content").removeClass("error-content")
            $('#myinfo_refresh').modal({ keyboard: true });
    }
    function show_error_refresh(title,error) {
            $("#myinfoLabel_refresh").text(title) ;
            $("#myinfoContent_refresh").text(error) ;
            $(".info-content").addClass("error-content")
            $(".error-content").removeClass("info-content")
            $('#myinfo_refresh').modal({ keyboard: true });
    }
    function delete_confirm(id){
        if(confirm("Really want to delete this commandtype ?")){
            location.href='/delete_one_commandtype/'+id
        }
    }
    </script>

    <style type="text/css">
    .btn-lg {

        float: right;
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.33;
        border-radius: 6px;
        }
    .Textarea {
        width:100%;
    }

</style>

{% endblock %}


        {% block body%}



 <div class="container">

     <h1>manage the commandtype</h1>


      <table class="table table-hover">
        <thead>
          <tr>
            <th>Type Name</th>
            <th>Description</th>
            <th>edit</th>
            <th>delete</th>
          </tr>
        </thead>
        <tbody>
        {% for commandtype in commandtypes.items %}
          <tr data-toggle="tooltip" data-placement="top"  id="tr{{ commandtype.typeid }}"  >
            <td style="display: none;" id="id{{ commandtype.typeid }}">{{ commandtype.typeid }}</td>
            <td>{{ commandtype.typename }}</td>
            <td>{{ commandtype.description }}</td>
            <td><button type="button" class="btn btn-info" onclick="show_edit('{{ commandtype.typeid }}','{{ commandtype.typename }}','{{ commandtype.description }}')">&nbsp; edit &nbsp;</button></td>
{#            <td><a href="delete_one_commandtype/{{ commandtype.typeid }}">delete</a> </td>#}
            <td><button type="button" class="btn  btn-danger" onclick="delete_confirm({{ commandtypes.typeid }})">delete</button></td>
          </tr>
        {%  endfor %}
        </tbody>
      </table>

 <ul class="pager">
      {% if commandtypes.has_prev %}<li><a href="{{ url_for('manage_commandtype', page = commandtypes.prev_num) }}"><< Previous</a></li>{% else %}<li class="disabled"><a href="#"><< Previous</a></li>{% endif %} </li> |
      {% if commandtypes.has_next %}<li><a href="{{ url_for('manage_commandtype', page = commandtypes.next_num) }}"> Next >></a></li>{% else %}<li class="disabled"><a href="#"> Next >></a></li>{% endif %}</li>
</ul>

 <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg " data-toggle="modal" onclick="show_add()">
  Add a new command type
</button>

<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="addModalLabel">Add a command type</h4>
      </div>
      <div class="modal-body">


       <form method="post" action="" class="addcommandtype" name="form1">
    {{ form.csrf_token }}
    <!--{{ form.hidden_tag() }}-->

    <h5>start with "*" is required , others are optional</h5>

   <div class="input-group">
  <span class="input-group-addon" id="type_name">*  Type Name</span>
  {{form.typename(class="form-control",placeholder="Network")}}
   </div>


    <br>

   <div class="input-group ">
  <span class="input-group-addon"> Description</span>
  {{form.description(class="form-control" ,placeholder="Network commands")}}
   </div>


           </form>



      </div>
      <div class="modal-footer">
        <button type="button" id="exit" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="edit" class="btn btn-primary" >Add this command type</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 </div>


 <div id="myinfo_refresh" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myinfoContent" aria-hidden="true">
      <div class="modal-dialog">
        <div class="info-content">
          <div class="modal-header">
            <button type="button" onclick="window.location.reload()" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myinfoLabel_refresh">Modal Heading</h4>
          </div>
          <div class="modal-body">
            <h4 id="myinfoContent_refresh">Overflowing text </h4>
          </div>
          <div class="modal-footer">
            <button type="button" onclick="window.location.reload()"  class="btn btn-default" data-dismiss="modal">OK</button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->






        {% endblock %}